<template>
  <div>
    <list-page :data="listPageConfig">
      <template v-slot:tableColumn>
        <el-table-column
          align="center"
          label="人事编号"
          prop="number"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="姓名"
          prop="name"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="手机号码"
          prop="tel"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="邮箱"
          prop="email"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="添加时间"
          prop="addTime"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="delUser(row)">
              离职
            </el-button>
          </template>
        </el-table-column>
      </template>
    </list-page>
    <add-dialog v-model="addDialog" @success="success"></add-dialog>
  </div>
</template>

<script>
import tableMixin from '@/mixin/tablePageMixin'
import ListPage from '@/views/_common/ListPage'
import AddDialog from './components/addDialog'
import { request } from '@/api/request'
import { isEmpty } from '@/utils'

export default {
  name: 'UserManage',

  components: {
    ListPage,
    AddDialog
  },

  mixins: [tableMixin],

  data() {
    return {
      addDialog: false,
      show: {
        form: {
          name: '',
          tel: '',
          email: '',
          password: '',
          aginPassword: ''
        }
      },
      action: {
        dialogShowName: ''
      }
    }
  },

  computed: {
    listPageConfig() {
      return {
        pageLoading: this.config.operating,
        dataLoading: this.config.loading,
        buttons: [{ type: 'primary', content: '添加用户', e: this.addUser }],
        table: {
          props: { data: this.tableData },
          on: { 'row-click': this.rowClick }
        },
        pagination: {
          props: { model: this.searchForm },
          on: {
            'current-change': this.pageChange,
            'size-change': this.pageSizeChange
          }
        }
      }
    }
  },

  methods: {
    addUser() {
      this.addDialog = true
    },

    success() {
      this.search()
    },

    delUser(row) {
      // console.log(row)
      request('company/users/allUsers/leave', { id: row.id }, () => {
        this.$message.success('离职成功')
        this.search()
      })
    },

    confirmAdd() {
      this.$refs.addForm.$refs.form.validate((valid) => {
        if (valid) {
          let form = {}
          Object.keys(this.show.form).forEach((key) => {
            if (!isEmpty(this.show.form[key])) form[key] = this.show.form[key]
          })
          request('company/users/allUsers/addSubmit', form, () => {
            this.$message.success('提交成功')
            this.action.dialogShowName = ''
            this.search()
          })
        } else {
          return false
        }
      })
    },

    search() {
      if (this.config.loading) return
      this.config.loading = true
      request(
        'company/users/allUsers/index',
        { p: this.searchForm.page, limit: this.searchForm.pageSize },
        (res) => {
          this.searchForm.total = res.data.count
          this.tableData = res.data._list
        }
      ).finally(() => (this.config.loading = false))
    }
  }
}
</script>
